<extend file='../master'/>
<block name="content">
    <link rel="stylesheet" href="{{__TEMPLATE__}}/css/css.css">
    <form action="" id="form" ng-controller="ctrl" method="post" class="form-horizontal" role="form">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-4 view">
                    <div class="big" ng-click="changeActive(k)" ng-repeat="(k,v) in data.articles" ng-if="$first">
                        <img ng-src="@{{v.thumb}}">
                        <div class="text" ng-bind="v.Title">
                        </div>
                    </div>
                    <div class="small" ng-click="changeActive(k)" ng-repeat="(k,v) in data.articles" ng-if="!$first">
                        <div class="text" ng-bind="v.title"></div>
                        <div class="img">
                            <img ng-src="@{{v.thumb}}">
                        </div>
                    </div>
                    <button type="button" class="btn btn-succes" ng-click="add()">添加图文</button>
                </div>
                <div class="col-xs-8">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="form-group">
                                <label for="" class="col-sm-2 control-label">标题</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" ng-model="active.title">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="col-sm-2 control-label">摘要</label>
                                <div class="col-sm-10">
                                    <textarea name="" class="form-control" rows="3" ng-model="active.digest"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="col-sm-2 control-label">图片</label>
                                <div class="col-sm-10">
                                    <div class="input-group">
                                        <input type="text" class="form-control" readonly="" ng-model="active.thumb">
                                        <div class="input-group-btn">
                                            <button ng-click="upImage()" class="btn btn-default" type="button">选择图片</button>
                                        </div>
                                    </div>
                                    <div class="input-group" style="margin-top:5px;">
                                        <img ng-src="@{{active.thumb}}" class="img-responsive img-thumbnail" width="150">
                                        <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="removeImg(this)">×</em>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="col-sm-2 control-label">内容</label>
                                <div class="col-sm-10">
                                    <textarea ng-model="active.content" id="container" style="height:300px;width:100%;"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="col-sm-2 control-label">链接</label>
                                <div class="col-sm-10">
                                    <input type="text" ng-model="active.content_source_url" class="form-control" id="" placeholder="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="data">
        <button class="btn btn-primary">保存</button>
    </form>
    <script>
        require(['angular', 'util'], function (angular, util) {
            angular.module('app', []).controller('ctrl', ['$scope', function ($scope) {
                $scope.data = {
                    articles: [
                        {
                            title: 'aa',
                            thumb_media_id: '',
                            thumb: '1.jpeg',
                            author: 'aa',
                            digest: 'aa',
                            content: 'ccc    ',
                            content_source_url: 'http://baidu.com',
                        }
                    ]
                };
                //添加图文
                $scope.add = function () {
                    if ($scope.data.length == 5) {
                        util.message('图文消息只能添加五条', '', 'error');
                        return;
                    }
                    var news = {
                        title: '标题',
                        thumb_media_id: '',
                        thumb: '',
                        author: '作者',
                        digest: '摘要',
                        content: '内容',
                        content_source_url: '',
                    };
                    $scope.data.articles.push(news);
                }
                $scope.active = $scope.data.articles[0];
                //更改当前编辑的图文
                $scope.changeActive = function (k) {
                    $scope.active = $scope.data.articles[k];
                }
                //选择图片
                $scope.upImage = function () {
                    util.image(function (images) {
                        //将图片推送到微信服务器获取media_id
                        $.post('{{site_url("site/PushImage")}}', {file: images[0]}, function (json) {
                            if (json.valid == 1) {
                                $scope.active.thumb_media_id = json.data.media_id;
                                $scope.active.thumb = images[0];
                                $scope.$apply();
                            } else {
                                message('上传失败,请稍候再试', '', 'warning');
                            }
                        }, 'json');
                    }, [])
                }
                //图文编辑器
                util.ueditor('container', {}, function (editor) {
                    editor.addListener('contentChange', function () {
                        $scope.active.content = editor.getContent();
                    });
                    editor.addListener('ready', function () {
                        if (editor && editor.getContent() != $scope.active.content) {
                            editor.setContent($scope.active.content);
                        }
                        $scope.$watch('active', function (item) {
                            if (editor && editor.getContent() != item.content) {
                                editor.setContent(item.content ? item.content : '');
                            }
                        }, true);
                    });
                    editor.addListener('clearRange', function () {
                        $scope.active.content = editor.getContent();
                        $scope.$apply();
                    });
                });
                $("form").submit(function () {
                    $("[name='data']").val(angular.toJson($scope.data));
                })
            }]);
            angular.bootstrap(document.getElementById('form'), ['app']);
        });
    </script>
</block>